<template>
  <view class="itemCon">
    <view class="img">
      <image mode="aspectFill" :src="item.goods_pic" lazy-load></image>
    </view>

    <view class="con">
      <view class="name"> {{ item.goods_name }} </view>
      <view class="time" v-if="item.book_info">
        预约时间：{{ item.book_info.worker_time }}
        <view class="num">X{{ item.num }}</view>
      </view>
      <view class="price">
        ¥<view>{{ getPrice(item.price)[0] }}</view
        >.{{ getPrice(item.price)[1] }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
  },

  computed: {
    getPrice() {
      return (price) => {
        return price ? price.split(".") : ["0", "00"];
      };
    },
  },
};
</script>

<style lang="less" scoped>
.itemCon {
  display: flex;
}

.img {
  position: relative;
  margin-right: 20rpx;
  width: 160rpx;
  height: 160rpx;

  image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    background: #000;
  }
}

.con {
  flex: 1;
  overflow: hidden;
  font-size: 24rpx;
  color: #8c8c8c;
}

.name {
  font-size: 28rpx;
  flex: 1;
  overflow: hidden;
  color: #262626;
}

.time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0 14rpx;
  font-size: 24rpx;
  color: #8c8c8c;
}

.price {
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  color: #262626;
  font-weight: bold;

  view {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 1.2;
  }
}
</style>
